<template>
    <div>
        <template v-for="item in list" :index="item.id+''">
            <template v-if="!item.routeUrl">
                <el-submenu :index="item.id+''" :key="item.id+''">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span slot="title">{{item.name}}</span>
                    </template>
                    <mall-menu :list="item.child" :key="item.id+''"></mall-menu>
                </el-submenu>
            </template>
            <el-menu-item v-if="item.routeUrl" :key="item.id" :index="item.id+''" @click="routeTo(item.routeUrl)">
                <span slot="title">{{item.name}}</span>
            </el-menu-item>
        </template>
    </div>
</template>
<script>
export default {
  name: 'MallMenu',
  props: {
    list: {
      type: Array

    }
  },
  data () {
    return {

    }
  },
  created () {
  },
  methods: {
    routeTo (routeUrl) {
      this.$router.push(routeUrl)
    }
  }
}
</script>
